import { css } from '@emotion/css';

import { GrafanaTheme2 } from '@grafana/data';
import { Button, Icon, useStyles2 } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext';
import { useKBar, VisualState } from 'kbar';

export const WelcomeBanner = () => {
  const styles = useStyles2(getStyles);
  const { chrome } = useGrafana();

  const handleNavigationClick = (navigation: string) => {
    console.error(navigation);
    chrome.setMegaMenuOpen(false);
    chrome.setMegaMenuOpen(true);
    localStorage.setItem('grafana.navigation', navigation);
    window.dispatchEvent(new Event('localStorageChange'));
  };

  const handleGoToWeb = (url: string) => {
    window.open(url, "_blank", "noopener,noreferrer");
  }

    const { query: kbar } = useKBar((kbarState) => ({
      kbarSearchQuery: kbarState.searchQuery,
      kbarIsOpen: kbarState.visualState === VisualState.showing,
    }));
  
    // const isLargeScreen = useMediaQueryMinWidth('lg');
  
    const onOpenSearch = () => {
      kbar.toggle();
    };

  return (
    // <div>123</div>
    // <div className={styles.container}>
    //   <h1 className={styles.title}>
    //     <Trans i18nKey="welcome.welcome-banner.welcome-to-grafana">Welcome to Grafana</Trans>
    //   </h1>
    //   <div className={styles.help}>
    //     <h3 className={styles.helpText}>
    //       <Trans i18nKey="welcome.welcome-banner.need-help">Need help?</Trans>
    //     </h3>
    //     <div className={styles.helpLinks}>
    //       {helpOptions.map((option, index) => {
    //         return (
    //           <a
    //             key={`${option.label}-${index}`}
    //             className={styles.helpLink}
    //             href={`${option.href}?utm_source=grafana_gettingstarted`}
    //           >
    //             {option.label}
    //           </a>
    //         );
    //       })}
    //     </div>
    //   </div>
    // </div>
    <div className={styles.dashboard}>
      <div className={styles.page}>
      <div className={styles.header}>
        <div className='logo'>
          <img src='/public/img/sec-logo.webp' alt='logo' width={100} />
        </div>
        <div className={styles.title1}>
          护航平台
        </div>
        <div className={styles.description}>
          安全一站式数智运维平台
        </div>
      </div>
      <div className={styles.search} style={{marginBottom: '20px'}}>
        <div className={styles.searchInput}>
          <input style={{width: '100%', outlineColor: 'transparent'}} type='text' placeholder='请输入搜索内容' />
        </div>
        <div className={styles.buttonGroup}>
          <Button style={{backgroundColor: '#0080ff', borderRadius: '20px'}} onClick={() => {onOpenSearch()}}>CMDB</Button>
          <Button style={{backgroundColor: 'rgba(0, 128, 255, 0.2)', color: '#0080ff', borderRadius: '20px'}}>处置记录</Button>
        </div>
      </div>

      <div className={styles.function}>
        <div className={styles.functionItem} onClick={() => { handleNavigationClick('基础运维'); }}>
          <Icon name='desktop' size='xxl' />
          <div className={styles.functionItemText}>
            基础运维
          </div>
        </div>
        <div className={styles.functionItem} onClick={() => { handleNavigationClick('成本运营'); }}>
          <Icon name='analytics' size='xxl' />
          <div className={styles.functionItemText}>
            成本运营
          </div>
        </div>
        <div className={styles.functionItem} onClick={() => { handleNavigationClick('风险管理'); }}>
          <Icon name='shield' size='xxl' />
          <div className={styles.functionItemText}>
            风险管理
          </div>
        </div>
        <div className={styles.functionItem} onClick={() => { handleNavigationClick('业务观测'); }}>
          <Icon name='bright' size='xxl' />
          <div className={styles.functionItemText}>
            业务观测
          </div>
        </div>
        <div className={styles.functionItem} onClick={() => { handleNavigationClick('厂内工具'); }}>
          <Icon name='bright' size='xxl' />
          <div className={styles.functionItemText}>
            厂内工具
          </div>
        </div>
      </div>

      <div className={styles.standardize}>
        <div className={styles.standardizeTitle}>规范制度</div>
        <div className={styles.standardizeContent}>
          <div style={{width: '100%', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px'}} >
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px', cursor: 'pointer'}}
            onClick={() => { handleGoToWeb('https://www.baidu.com/'); }}
            >
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                百度
              </div>
            </div>
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px'}}>
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                稳定性军规
              </div>
            </div>
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px'}}>
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                稳定性军规333333
              </div>
            </div>
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px'}}>
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                稳定性军规
              </div>
            </div>
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px'}}>
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                稳定性军规
              </div>
            </div>
            <div style={{flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', flexFlow: 'row', gap: '20px'}}>
              <Icon name='desktop' size='xxl' />
              <div style={{textAlign: 'center', flex: 1}}>
                稳定性军规
              </div>
            </div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
  );
};

function getStyles(theme: GrafanaTheme2) {
  return {
    dashboard: css({
      margin: theme.spacing(2),
      background: theme.colors.background.primary,
      borderRadius: '10px',
      height: '100%',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    }),
    page: css({
      height: '100%',
      width: '60%',
      minWidth: '1000px'
    }),
    header: css({
      display: 'flex',
      flexFlow: 'column',
      justifyItems: 'center',
      alignItems: 'center',
      paddingTop: theme.spacing(20),
      marginBottom: '20px',
    }),
    title1: css({
      fontSize: '30px',
      fontWeight: 'bold',
      color: theme.colors.text.primary,
      paddingTop: '20px',
    }),
    description: css({
      fontSize: '14px',
      color: theme.colors.text.secondary,
      paddingTop: '10px',
    }),
    search: css({
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: theme.spacing(1),
      paddingLeft: theme.spacing(2),
      marginBottom: '20px',
      width: '100%',
      borderRadius: '40px',
      border: `1px solid ${theme.colors.border.weak}`,
    }),
    searchInput: css({
      display: 'flex',
      flexFlow: 'row',
      alignItems: 'center',
      gap: theme.spacing(2),
      flex: 1,
      [theme.breakpoints.down('sm')]: {
        flexDirection: 'column',
        alignItems: 'stretch',
      },
    }),
    buttonGroup: css({
      display: 'flex',
      alignItems: 'center',
      gap: theme.spacing(2),
      [theme.breakpoints.down('sm')]: {
        flexDirection: 'column',
        alignItems: 'stretch',
      },
    }),
    function: css({
      display: 'grid',
      gridTemplateColumns: 'repeat(5, 1fr)',
      gap: theme.spacing(3),
      alignItems: 'center',
      position: 'sticky',
      top: 0,
      zIndex: theme.zIndex.navbarFixed,
      padding: theme.spacing(2, 0),
      marginBottom: '20px',
      [theme.breakpoints.down('sm')]: {
        flexDirection: 'column',
        gap: theme.spacing(1),
        alignItems: 'stretch',
      },
    }),
    functionItem: css({
      display: 'flex',
      flexFlow: 'column',
      alignItems: 'center',
      background: theme.colors.background.secondary,
      color: theme.colors.text.primary,
      padding: theme.spacing(3),
      // width: '180px',
      width: '100%',
      borderRadius: '14px',
      gap: theme.spacing(1),
      cursor: 'pointer',
      // border: `1px solid ${theme.colors.border.weak}`,
      [theme.breakpoints.down('sm')]: {
        flexDirection: 'column',
        alignItems: 'stretch',
      },
    }),
    functionItemText: css({
      fontSize: '14px',
      color: theme.colors.text.primary,
    }),
    standardize: css({
      display: 'flex',
      flexFlow: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      paddingTop: theme.spacing(4),
      paddingBottom: theme.spacing(4),
      gap: theme.spacing(2),
      background: theme.colors.background.secondary,
      borderRadius: '16px',
      [theme.breakpoints.down('sm')]: {
        alignItems: 'stretch',
      },
    }),
    standardizeTitle: css({
      fontSize: '20px',
      fontWeight: 'bold',
      color: theme.colors.text.primary,
    }),
    standardizeContent: css({
      display: 'flex',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: theme.spacing(4),
      paddingLeft: theme.spacing(8),
      paddingRight: theme.spacing(8),
      width: '100%',
      [theme.breakpoints.down('sm')]: {
        gridTemplateColumns: 'repeat(2, 1fr)',
      },
    }),
    iconTitle: css({
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'flex',
        alignItems: 'center',
      },
    }),
    title: css({
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      whiteSpace: 'nowrap',
      display: 'flex',
      fontSize: theme.typography.h4.fontSize,
      margin: 0,
    }),
    body: css({
      label: 'body',
      display: 'flex',
      flex: 1,
      flexDirection: 'column',
      overflowY: 'auto',
    }),
  };
}

// const getStyles = (theme: GrafanaTheme2) => {
//   return {
//     container: css({
//       display: 'flex',
//       backgroundSize: 'cover',
//       height: '100%',
//       alignItems: 'center',
//       justifyContent: 'space-between',
//       padding: theme.spacing(0, 3),

//       [theme.breakpoints.down('lg')]: {
//         backgroundPosition: '0px',
//         flexDirection: 'column',
//         alignItems: 'flex-start',
//         justifyContent: 'center',
//       },

//       [theme.breakpoints.down('sm')]: {
//         padding: theme.spacing(0, 1),
//       },
//     }),
//     title: css({
//       marginBottom: 0,

//       [theme.breakpoints.down('lg')]: {
//         marginBottom: theme.spacing(1),
//       },

//       [theme.breakpoints.down('md')]: {
//         fontSize: theme.typography.h2.fontSize,
//       },
//       [theme.breakpoints.down('sm')]: {
//         fontSize: theme.typography.h3.fontSize,
//       },
//     }),
//     help: css({
//       display: 'flex',
//       alignItems: 'baseline',
//     }),
//     helpText: css({
//       marginRight: theme.spacing(2),
//       marginBottom: 0,

//       [theme.breakpoints.down('md')]: {
//         fontSize: theme.typography.h4.fontSize,
//       },

//       [theme.breakpoints.down('sm')]: {
//         display: 'none',
//       },
//     }),
//     helpLinks: css({
//       display: 'flex',
//       flexWrap: 'wrap',
//     }),
//     helpLink: css({
//       marginRight: theme.spacing(2),
//       textDecoration: 'underline',
//       textWrap: 'nowrap',

//       [theme.breakpoints.down('sm')]: {
//         marginRight: theme.spacing(1),
//       },
//     }),
//   };
// };
